<template>
  <div class="movie-wrapper" @click="handleClickMovie(groupMovie.id)">
    <img class="movie-img" :src="movieImgUrl">
    <span class="movie-title">{{groupMovie.title}}</span>
    <stars :starsRating="this.starsRating"></stars>
  </div>
</template>

<script>
import Stars from './Stars'
import {getImages} from 'api/img'
export default {
  name: 'Movie',
  props: {
    groupMovie: Object
  },
  data () {
    return {
      movieImgUrl: '',
      starsRating: {}
    }
  },
  components: {
    Stars
  },
  methods: {
    handleClickMovie (id) {
      this.$router.push({path: `/movie-detail/${id}`, query: {detailInfo: this.groupMovie}})
      this.showHeadBack()
    },
    showHeadBack () {
      this.$store.dispatch('showHeadBack', 1)
    }
  },
  created () {
    this.movieImgUrl = getImages(this.groupMovie.images.large)
    this.starsRating = this.groupMovie.rating
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/variable'
  .movie-wrapper
    display: flex
    flex-direction: column
    padding: 0 .2rem
    width: 2.3rem
    .movie-img
      width: 2.3rem
      height: 3rem
      padding-bottom: .2rem
    .movie-title
      font-size: .32rem
      text-align: center
      margin-bottom: .2rem
      overflow: hidden
      white-space: nowrap
      text-overflow: ellipsis
</style>
